<template>
  <div class="app-container">
    <el-card>
      <!-- 查询条件 -->
      <el-form :inline="true" :model="queryParams" size="small" ref="queryRef" label-width="80px">
        <el-form-item label="异常类型">
          <el-select v-model="queryParams.exceptionType" placeholder="请选择">
            <el-option label="入库异常" value="inbound"/>
            <el-option label="出库异常" value="outbound"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option label="未处理" value="pending"/>
            <el-option label="已处理" value="resolved"/>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 异常列表 -->
    <el-card style="margin-top: 10px;">
      <el-table :data="list" border stripe v-loading="loading">
        <el-table-column prop="id" label="异常编号" width="140"/>
        <el-table-column prop="exceptionType" label="异常类型" width="120"/>
        <el-table-column prop="description" label="异常描述" min-width="200"/>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'resolved' ? 'success' : 'danger'">
              {{ scope.row.status === 'resolved' ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">处理</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-show="total > 0"
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="handlePageChange"
      />
    </el-card>

    <!-- 处理弹窗 -->
    <el-dialog title="异常处理" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="异常编号">
          <el-input v-model="form.id" disabled/>
        </el-form-item>
        <el-form-item label="处理意见">
          <el-input type="textarea" v-model="form.handleRemark" rows="3" placeholder="请输入处理意见"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submitHandle">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExceptionHandle',
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        exceptionType: '',
        status: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      dialogVisible: false,
      form: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取异常列表
    async getList() {
      this.loading = true
      try {

      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    resetQuery() {
      this.queryParams = { exceptionType: '', status: '', dateRange: [], pageNum: 1, pageSize: 10 }
      this.getList()
    },
    handlePageChange(page) {
      this.queryParams.pageNum = page
      this.getList()
    },
    handleEdit(row) {
      this.form = Object.assign({}, row)
      this.dialogVisible = true
    },
    async submitHandle() {
      if (!this.form.handleRemark) {
        this.$message.warning('请输入处理意见')
        return
      }
      try {
        await axios.post('/api/exception/handle', this.form)
        this.$message.success('处理完成')
        // 修改状态
        const target = this.list.find(item => item.id === this.form.id)
        if (target) target.status = 'resolved'
        this.dialogVisible = false
      } catch (e) {
        this.$message.error('处理失败')
      }
    },
    handleDelete(row) {
      this.$confirm(`确认删除异常记录 ${row.id} 吗？`, '提示', { type: 'warning' })
        .then(() => {
          this.list = this.list.filter(item => item.id !== row.id)
          this.$message.success('删除成功')
        })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
